/* Specificity hack: Override @wordpress/components styles for the button component */
.button.button.button {
	flex-grow: 1;
	font-family: 'San Francisco', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 50;
	height: auto;
	width: auto;
	white-space: nowrap;
	cursor: pointer;
	color-scheme: dark;
	border-radius: 6px;
	border: 0;
	appearance: button;
	-webkit-appearance: button;
	color: revert;
}

.button:global(.components-button) {
	background: revert;
}

.button.button.button.is-browser-chrome {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	min-width: 40px;
	background: transparent;
}

.button.button.button:not(.is-browser-chrome) {
	padding: 12px 7px;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.button[disabled] {
	opacity: 0.5;
}

.button:hover,
.button:focus,
.button:active,
.button[aria-expanded='true'] {
	opacity: 0.8;
	color: revert !important;
}

.button.is-large {
	height: 40px;
	padding: 5px 20px;
	font-size: 18px;
}

.button.is-primary {
	background: #1e2327;
	color: #fff;
	border: none;
}
